<template>
  <div class="container">
    
     <div id="tab">
   <el-table :data="xinxiData" style="width: 100%">
    <el-table-column label="学号" prop="xuehao" />
    <el-table-column label="姓名" prop="name"/>
    <el-table-column label="班级" prop="class"/>
    <el-table-column label="专业" prop="zhuanye"/>
     <el-table-column label="成绩" prop="chengji"/>
    <el-table-column align="right" label="操作"  #default="scope">
       <el-button size="small" type="danger"  @click="Delfun(scope.$index, scope.row)">删除</el-button>
       <el-button size="small" type="warning"  @click="gaifun(scope.$index, scope.row)">修改</el-button>
    </el-table-column>
  </el-table>
     </div>

      <div id="Form">
        学号：<el-input v-model="input1" placeholder="请输入学号" class="inp"  type="number" min=1 /><br/>
        姓名：<el-input v-model="input2" placeholder="请输入姓名" class="inp" /><br/>
        班级：<el-input v-model="input3" placeholder="请输入班级" class="inp" /><br/>
        专业：<el-input v-model="input4" placeholder="请输入专业" class="inp" /><br/>
        成绩：<el-input v-model="input5" placeholder="请输入成绩" class="inp" type="number" min=0 /><br/>
          <el-button type="success" plain @click="addfun()">添加</el-button> <br/><br/>
          <div id="cha-xuehao">
        学号：<el-input v-model="input6" placeholder="请输入学号，点击查询"  type="number" min=1 class="XueHao"/><br/><el-button type="primary" plain class="chaxun" @click="chafun()">查询</el-button> <p id="p1" v-html="p1"></p>
        </div>
     </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        input1:"",
        input2:"",
        input3:"",
        input4:"",
        input5:"",
        input6:"",
        p1:"",
        xinxiData:[],
      
        
    }
  },
  created(){
    this.xinxiData = JSON.parse(localStorage.getItem('xinxilist') || '[]')

  },
  methods:{
    addfun(){
      var localdata = JSON.parse(localStorage.getItem('xinxilist') || '[]')
      if(localdata.length>0){

           var thisIndex = this.xinxiData.findIndex((obj)=>{
            return this.input1 == obj.xuehao
          })

          if(thisIndex>-1){
            localdata[thisIndex].name=this.input2
            localdata[thisIndex].class=this.input3
            localdata[thisIndex].zhuanye=this.input4
            localdata[thisIndex].chengji=this.input5
            localStorage.setItem('xinxilist',JSON.stringify(localdata))
            this.xinxiData=localdata
          }else{
             this.jiafun()
            }
        }else{
            this.jiafun()
        }
    
    },
    jiafun(){
         var localdata = JSON.parse(localStorage.getItem('xinxilist') || '[]')
          let arr = {
            xuehao:this.input1,
            name:this.input2,
            class:this.input3,
            zhuanye:this.input4,
            chengji:this.input5
            }
          localdata.push(arr)
          localStorage.setItem('xinxilist',JSON.stringify(localdata))
        //更新页面显示到列表
          this.xinxiData=localdata
    },
    Delfun(index){
     var data = JSON.parse(localStorage.getItem('xinxilist'))
      data.splice(index,1)
      localStorage.setItem('xinxilist',JSON.stringify(data)) 
      this.xinxiData=data
    },
    gaifun(index,row){
        this.input1=row.xuehao;
        this.input2=row.name;
        this.input3=row.class;
        this.input4=row.zhuanye;
        this.input5=row.chengji;
    },
    chafun(){
      var data = JSON.parse(localStorage.getItem('xinxilist'))
     for(let j=0;j<data.length;j++){
         if(data[j].xuehao==this.input6){
             this.p1="此学号学生姓名为："+data[j].name
             return
         }else{
            this.p1="查无此学号学生"
        }
       
     }
    
    }
  },
  
}
</script>

<style scoped>

   #Form .inp{
        width: 300px;
        height: 40px;
    }
    #Form #cha-xuehao{
        clear: both;
    }
    #cha-xuehao .XueHao{
        width: 200px;
        height: 40px;
        display: inline-block;
    }
    #tab{
        width:70vw;
        margin: auto;
        padding: 5%;
    }
    
</style>
